<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../../js/layui/css/layui.css" />
<link rel="stylesheet" href="../../../editor/css/editormd.css" />
<link rel="stylesheet" href="style.css" />
<meta charset="utf-8">
<title></title>

<script src="../../../js/vue/vue.js"></script>
<script src="../../../js/vue/axios.min.js"></script>
<script src="../../../js/layui/layui.js"></script>
<script type="text/javascript" src="../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../editor/editormd.min.js"></script>



<style>
* {
	margin: 0px;
	padding: 0px;
}

body {
	overflow-x: hidden;
}

.zth-top-text {
	border-bottom: 2px #009E94 solid;
	line-height: 30px;
	padding-left: 20px;
	font-size: 18px;
	font-family: "楷体";
}

.zth-input-text {
	width: 48.7%;
	height: 30px;
	margin-top: 30px;
	margin-left: 10px;
}

.zth-textarea-gauge {
	margin-top: 20px;
}

.zth-but-class {
	position: absolute;
	right: 30px;
}
</style>
</head>
<body>
	<div id="app">
		<div class="zth-top-text">发布文章</div>

		<div>
			<div>
				<input class="zth-input-text" v-model="blog_title" type="text"
					placeholder="*请输入文章标题(必填)" />
				<!-- <select v-model="blog_tags_id" class="zth-input-text" lay-verify="required">
							<option v-for="(tt,index) in blog_tagss" :value="tt.tag_id">{{tt.tag_name}}</option>
						</select> -->
				<input class="zth-input-text zth-input-choice" readonly="readonly"
					@click="tagclick" v-model="blog_tags" type="text"
					placeholder="*请选择标签)" />
			</div>
			<div>
				<input class="zth-input-text" v-model="blog_sub_url" type="text"
					placeholder="亲输入自定义路径:如springboot-mybatis,默认为id" /> <select
					v-model="blog_category_id" class="zth-input-text"
					lay-verify="required">
					<option v-for="(ss,index) in categorys" :value="ss.category_id">{{ss.category_name}}</option>
				</select>

			</div>

		</div>

		<div id="test-editormd">
			<textarea style="display: none;" v-model="blog_content"
				id="blog_content"></textarea>
		</div>

		<div class="demo">
			<div class="wrap" style="width: 198px">
				<input type="checkbox" id="checkbox_b1"v-model="enable_comment" class="chk_2" style="height: 30px"/><label
					for="checkbox_b1" style="font-family: '楷体'">不允许评论</label>
			</div>
		</div>

		<div class="zth-but-class">
			<input type="button"
				class="layui-btn layui-btn-radius layui-btn-primary"
				@click="returns" value="返回文章列表" /> <input type="button"
				class="layui-btn layui-btn-radius layui-btn-normal" @click="edit"
				value="保存文章" />
		</div>
	</div>

	<script type="text/javascript">
			//截取回显id
			var href = location.href;
			var index = href.indexOf("&"); 
			var subs = href.substr(index + 9, href.length);

			//截取code判断该项操作是新增还是编辑
			var href = location.href;
			var index1 = href.indexOf("=");
			var sub = href.substr(index1 + 1, href.length);
			var ccx = sub.substr(0, 1);

			<!--富文本编辑器-->
			<!-- layui -->
			var testEditor;

			$(function() {
				testEditor = editormd("test-editormd", {
					width: "100%",
					height: 380,
					syncScrolling: "single",
					path: "/ssb/editor/lib/",
					saveHTMLToTextarea: true, //注意3：这个配置，方便post提交表单

					emoji: true, //emoji表情，默认关闭
					taskList: true,
					tocm: true, // Using [TOCM]
					tex: true, // 开启科学公式TeX语言支持，默认关闭

					flowChart: true, //开启流程图支持，默认关闭
					sequenceDiagram: true, //开启时序/序列图支持，默认关闭,

					dialogLockScreen: false, //设置弹出层对话框不锁屏，全局通用，默认为true
					dialogShowMask: false, //设置弹出层对话框显示透明遮罩层，全局通用，默认为true
					dialogDraggable: false, //设置弹出层对话框不可拖动，全局通用，默认为true
					dialogMaskOpacity: 0.4, //设置透明遮罩层的透明度，全局通用，默认值为0.1
					dialogMaskBgColor: "#000", //设置透明遮罩层的背景颜色，全局通用，默认为#fff

					codeFold: true,
					/**上传图片相关配置如下*/
					imageUpload: true,
					imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
					imageUploadURL: "/ssb/blog/upload", //注意你后端的上传图片服务地址

					/**设置主题颜色*/
					editorTheme: "pastel-on-dark",
					theme: "gray",
					previewTheme: "dark"

				});

				/*
            
				testEditor = editormd({
				    id      : "test-editormd",
				    width   : "90%",
				    height  : 640,
				    path    : "../lib/"
				});
				*/
			});

			<!-- vue -->
		</script>
	<script>
			var $;
			var upload;
			//储存从标签页面获得的数据
			var tag_name;
			
			layui.use(['jquery', 'layer','upload'], function() {
				upload=layui.upload;
				$ = layui.jquery;

			});
			//传入子页面进行回显
			var tags_id;//接收标签表id
			var wvn = new Vue({
				el: "#app",
				data() {
					return {
						//设置一个路径、用于跳转父页面
						href: '../tb_blog2/tb_blog2.html',
						categorys: [],//储存标签表数据
						category_id: "",
						blog_tagss: [], //储存标签
						blog_tags_id: 0, //博客标签id
						
						enable_comment:false,//储存评论状态
						
						//回显数据
						blog_id: subs, //博客id
						blog_title: "", //博客标题
						blog_sub_url: "", //博客自定义路径url
						blog_category_id: 22, //博客分类id
						blog_tags: "", //博客标签
						blog_content: "" //博客内容
					}
				},
				//程序启动调用方法
				mounted: function() {
					this.classify();
					this.show();
					this.tagShow();
				},

				methods: {
					//跳转父页面方法
					returns: function() {
						location.href = this.href;
					},
					//类型显示
					classify: function() {
						var thsi = this;
						axios.get('/ssb/category/CategoryAll').then(function(res) {
							var o = res.data.data;
							thsi.categorys = o;
							//设置默认值
							/* thsi.category_id = thsi.categorys[2].category_id; */
						}, function(err) {
							console.log(err);
						})
					},
					//标签显示
					tagShow: function() {
						axios.get('/ssb/tag/tagAll').then(res => {
							this.blog_tagss = res.data.list;
							
						}, err => {
							console.log(err);
						})
					},
					//数据回显
					show: function() {
						//编辑回显
						if (ccx == 2) {
							axios.get('/ssb/blog/blogById?id=' + this.blog_id).then(res => {
								var o = res.data;
								if(o.enable_comment==1){
									this.enable_comment=true;
								}
								this.blog_title = o.blog_title;
								this.blog_sub_url = o.blog_sub_url;
								this.blog_category_id = o.blog_category_id;
								this.blog_content = o.blog_content;
								this.blog_tags = o.blog_tags;
								this.showTags();
							}, err => {
								console.log(err);
							});
						}

					},
					//用回显标签名获取标签id
					showTags: function() {
						axios.get('/ssb/tag/tagByName?tag_name=' + this.blog_tags).then(res => {
							tags_id= res.data;
							/* this.blog_tags_id = res.data[0].tag_id; */
						}, err => {
							console.log(err);
						});
					},
					edit: function() {
						console.log(this.enable_comment);
						if (ccx == 2) {//编辑
							var params = new URLSearchParams();
							//获取标签名
							/* var tags = axios.get('/ssb/tag/tagById?tags_id=' + this.blog_tags_id).then(res => {
								this.blog_tags = res.data.tag_name;
								params.append('blog_tags', res.data.tag_name); //博客标签 
							}, err => {
								console.log(err);
							}); */
							//获取博客类型名
							axios.get('/ssb/category/findById?category_id='+this.blog_category_id).then(res=>{
								params.append('blog_category_name', res.data.category_name); //博客类型名称
							},err=>{
								console.log(err);
							});
							if(this.enable_comment){
								params.append('enable_comment', 1);
							}
							params.append('blog_id', this.blog_id); //博客id
							params.append('blog_title', this.blog_title);  //博客标题
							params.append('blog_sub_url', this.blog_sub_url); //博客自定义路径
							params.append('blog_content', testEditor.getHTML()); //博客内容
							params.append('blog_category_id', this.blog_category_id); //博客类型id
							params.append('blog_tags', tag_name);//博客标签  
							
							if(this.blog_category_id==0 || this.blog_id==0||
									this.blog_title==null || this.blog_title==''||this.blog_title.indexOf(" ")!=-1||
									this.blog_sub_url==null || this.blog_sub_url==''||this.blog_sub_url.indexOf(" ")!=-1||
									this.blog_content==null || this.blog_content==''||this.blog_content.indexOf(" ")!=-1||
									this.blog_category_id==null || this.blog_category_id==''
									){
								alert("数据不能有空或出现空格！");
							}else{
								layer.open({
									 title: '在线编辑'
										 ,content: '<img id="demo1" src="" width="100">',
										 shade: false, //不显示遮罩
										time: 100000, //100s后自动关闭
										success:function(){
											var uploadInst = upload.render({
											    elem: "#de" //绑定元素
											    ,url: '/ssb/blog/common_upload' //上传接口
											    ,done: function(res){
													 $('#demo1').attr('src', res.url); //图片链接（base64）
											      //上传完毕回调
											    	
											    }
											    ,error: function(){
											      //请求异常回调
											    }
											  });
										},
										btn:['<div id="de">添加图片</div>','发布','草稿','取消'],
									yes:function(index,layero){
										

									},

									btn2:function(index,layero){

										params.append('blog_status', 1);
										axios.post('/ssb/blog/edit', params).then(res => {
											if (res.data.row > 0) {
												succeeds(res.data.message);
											} else {
												lose();
											}
										}, err => {
											console.log(err);
										})

									},
									btn3:function(index,layero){
										params.append('blog_status', 0);
										axios.post('/ssb/blog/edit', params).then(res => {
											if (res.data.row > 0) {
												succeeds(res.data.message);
											} else {
												lose();
											}
										}, err => {
											console.log(err);
										})

									},
									btn4:function(index,layero){

										layer.close(index);

									}

									});
							/*
							var index = layer.confirm('发布还是下次继续编辑', {
								btn: ['草稿', '发布', "关闭"], //按钮
								shade: false, //不显示遮罩
								time: 20000, //20s后自动关闭
							}, function() {
								params.append('blog_status', 0);
								axios.post('/ssb/blog/edit', params).then(res => {
									if (res.data.row > 0) {
										succeeds(res.data.message);
									} else {
										lose();
									}
								}, err => {
									console.log(err);
								})
								//关闭提示框
								layer.close(index);

							}, function() {
								params.append('blog_status', 1);
								axios.post('/ssb/blog/edit', params).then(res => {
									if (res.data.row > 0) {
										succeeds();
									} else {
										lose();
									}
								}, err => {
									console.log(err);
								})
								//关闭提示框
								layer.close(index);
							}, function() {
								//关闭提示框
								layer.close(index);
							});
							*/
						}
						} else {
							//添加							
							var params = new URLSearchParams();
							//获取标签名
							/* var tags = axios.get('/ssb/tag/tagById?tags_id=' + this.blog_tags_id).then(res => {
								this.blog_tags = res.data.tag_name;
								params.append('blog_tags', res.data.tag_name); //博客标签 
							}, err => {
								console.log(err);
							}); */
							//获取博客类型名
							axios.get('/ssb/category/findById?category_id='+this.blog_category_id).then(res=>{
								params.append('blog_category_name', res.data.category_name); //博客类型名称
							},err=>{
								console.log(err);
							});
							if(this.enable_comment){
								params.append('enable_comment', 1);
							}
							params.append('blog_title', this.blog_title);  //博客标题
							params.append('blog_sub_url', this.blog_sub_url); //博客自定义路径
							params.append('blog_content', testEditor.getHTML()); //博客内容 
							params.append('blog_category_id', this.blog_category_id); //博客类型id
							params.append('blog_tags', tag_name); //博客标签 
							if(this.blog_category_id==0 ||
									this.blog_title==null || this.blog_title==''|| this.blog_title.indexOf(" ")!=-1||
									this.blog_sub_url==null || this.blog_sub_url==''|| this.blog_sub_url.indexOf(" ")!=-1||
									testEditor.getHTML()==null || testEditor.getHTML()==''||
									this.blog_category_id==0
									){
								alert("数据不能有空或包含空格！！");
							}else{
								layer.open({
									 title: '请选择以下操作'
									 ,content: '<img id="demo1" src="" width="100">',
									 shade: false, //不显示遮罩
									time: 100000, //100s后自动关闭
									success:function(){
										var uploadInst = upload.render({
										    elem: "#de" //绑定元素
										    ,url: '/ssb/blog/common_upload' //上传接口
										    ,done: function(res){
												 $('#demo1').attr('src', res.url); //图片链接（base64）
										      //上传完毕回调
										    	
										    }
										    ,error: function(){
										      //请求异常回调
										    }
										  });
									},
									btn:['<div id="de">添加图片</div>','发布','草稿','取消'],
									//图片
									yes:function(index,layero){
										
										 /*  var uploadInst = upload.render({
										    elem: layero[0]
										    ,url: '/ssb/blog/common_upload' //改成您自己的上传接口
										    ,isOutAnim:false
										    ,before: function(obj){
										      //预读本地文件示例，不支持ie8
										      obj.preview(function(index, file, result){
										        $('#demo1').attr('src', result); //图片链接（base64）
										      });
										    }
										    ,done: function(res){
										      //如果上传失败
										      if(res.code > 0){
										        return layer.msg('上传失败');
										      }
										      //上传成功
										    }
										  });  */
									},
									//发布
									btn2:function(index,layero){
										params.append('blog_status', 1);
										axios.post('/ssb/blog/add', params).then(res => {
											if (res.data.row > 0) {
												succeeds(res.data.message);
											} else {
												lose();
											}
										}, err => {
											console.log(err);
										})
									},
									//草稿
									btn3:function(index,layero){
										params.append('blog_status', 0);
										axios.post('/ssb/blog/add', params).then(res => {
											if (res.data.row > 0) {
												succeeds(res.data.message);
											} else {
												lose();
											}
										}, err => {
											console.log(err);
										})

									},
									//取消
									btn4:function(index,layero){
										layer.close(index);

									}

									});
								
							/*var index = layer.confirm('请选择以下操作', {
								btn: ['草稿', '发布', "关闭"], //按钮
								shade: false, //不显示遮罩
								time: 20000, //20s后自动关闭
							}, function() {
								params.append('blog_status', 0);
								axios.post('/ssb/blog/add', params).then(res => {
									if (res.data.row > 0) {
										succeeds(res.data.message);
									} else {
										lose();
									}
								}, err => {
									console.log(err);
								})
								//关闭提示框
								layer.close(index);
							}, function() {
								params.append('blog_status', 1);
								axios.post('/ssb/blog/add', params).then(res => {
									if (res.data.row > 0) {
										succeeds(res.data.message);
									} else {
										lose();
									}
								}, err => {
									console.log(err);
								})
								//关闭提示框
								layer.close(index);
							}, function() {
								//关闭提示框
								layer.close(index);
							});*/
						}
						}
					},
					//tag跳转
					tagclick: function() {
						var at=this; 
						layer.open({
							type: 2,
							area: ['500px', '500px'],
							fixed: false, //不固定
							maxmin: true,
							content: 'blog_tag.html?id='+tags_id,
							fix: false,
					           btn: ['确认', '关闭'],
					           btnclass: ['btn btn-primary', 'btn btn-danger'],
					           yes: function(index, layero){
					        	   var son_msg = $(layero).find("iframe")[0].contentWindow.callBackMsg();
					        	   //接收父级返回的参数
					        	   tag_name=son_msg;
					        	   at.blog_tags=son_msg;
					        	   layer.close(index); //如果设定了yes回调，需进行手工关闭
					        	  }, cancel: function () {
					        		  
					               return true;
					           }
				        
						});
					}


				}

			});
			//编辑成功
			function succeeds(message) {
				layui.use(['form', 'jquery'], function() {
					layer.alert(message + "成功！", function() {
						location.href = "../tb_blog2/tb_blog2.html";
					});
				});
			}
			//编辑失败
			function lose() {
				layui.use(['form', 'jquery'], function() {
					layer.alert("失败！");
				});
			}

			
		</script>
</body>
</html>
